Styling

Most of the core React Native components has a property called style that can be used for inline styling.

<Text style={{ fontSize:18, color: 'red' }}>Red text</Text>

The better way is to use StyleSheet component. Styles defined in StyleSheet can be reused across multiple components:

Import the StyleSheet component:

import { StyleSheet, Text } from "react-native";

StyleSheet create method creates a StyleSheet object, which groups styles together and assign each style a unique identifier:

const styles = StyleSheet.create({
  alerttext: {
    fontSize: 18,
    color: "red",
  },
});

Use styles in the component's style attribute

<Text style="{styles.alerttext}">Red text</Text>

Task

Continue with the Todolist app created in the Flatlist section. Add a style for the list item using StyleSheet to have a light blue background and rounded corners as shown in the following image.